<template>
	<view class="recharge-list full box relative bg-primary flex-col">
		<view class="w-wrap">
			<view class="w-inner">
				<mescroll-uni @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback">
					<view class="record-list">
            <view class="record-item" v-for="(item,index) in list" :key="index">
              <view class="item-header">
                <text>套餐名称：{{ item?.rechargeconfig.name }}</text>
                <text class="item-date">{{ item.create_time }}</text>
              </view>
              <view class="desc-item">
                <text>套餐内容：{{ item?.rechargeconfig.taocan_neirong}}</text>
              </view>
              <view class="desc-item">
                <text>套餐时限：{{ item?.rechargeconfig.day_num }}天</text>
              </view>
              <view class="desc-item">
                <text>套餐说明：{{ item?.rechargeconfig.taocan_shuoming }}</text>
              </view>
              <view class="desc-item">
                <text>原价：￥{{ item?.rechargeconfig.yuanlai_price}}元</text>
              </view>
              <view class="desc-item">
                <text>现价：￥{{ item?.rechargeconfig.pay_price }}元</text>
              </view>
            </view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import  {request,formatDate} from  "@/utils/tool"
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
        list:[]
			}
		},
    methods: {
      async upCallback(ev) {
        const {num,size} = ev;
        const resp = await  request({
          url: "/recharge/rechargeorderlists",
          data:{
            page_no:num,
            page_size: size,
          },
          method: "GET",
        })
        const {lists,count} = resp.data
        if(num === 1) this.list =[]
        this.list.push(...lists.map(item=>{
          item.create_time = formatDate(item.create_time)
          return item
        }))
        this.mescroll.endBySize(lists.length,count)
      }
    },
	}
</script>

<style lang="scss" scoped>
	.recharge-list {
    .record-list{
      padding: 32rpx 20rpx 0;
      box-sizing: border-box;
      position: relative;
      .record-item{
        padding: 28rpx 30rpx;
        box-sizing: border-box;
        position: relative;
        background: #fff;
        border-radius: 18rpx 18rpx 18rpx 18rpx;
        margin-bottom: 16rpx;
        .desc-item{
          font-size: 28rpx;
          color: #666666;
          line-height: 44rpx;
          white-space: pre-wrap;
          word-break: break-all;
        }
        .item-header{
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: #666666;
          line-height: 44rpx;
          justify-content: space-between;
        }
      }
    }
  }
</style>